<template>

<el-button type="primary" @click="adds">
    <el-icon><Plus /></el-icon>
    新增
</el-button>
<el-button type="primary" @click="dels" 
  :disabled="ids.length === 0">
    <el-icon><Delete /></el-icon>
    删除
</el-button>

<el-table :data="tableData" border  style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" fixed="left"/>
    <el-table-column prop="gid" label="序号" fixed="left"/>
    <el-table-column prop="gName" label="商品名称" fixed="left"/>
    <el-table-column label="是否启用">
        <template #default="scope">
            <el-tag v-if="scope.row.gState == 0" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
        </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" width="200px">
        <template #default="scope">
            <el-link type="primary" @click="upd(scope.row)"> &nbsp;修改 </el-link>
        </template>
    </el-table-column>
  </el-table>

 <!-- 添加 -->
 <el-dialog v-model="addshow" title="商品管理-增加" width="800" 
    @close="handleClose">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="data"
    :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize"
    status-icon >
    <el-form-item label="商品名称" prop="gName">
      <el-input v-model="data.gName" />
    </el-form-item>
    <el-form-item label="是否启用">
      <el-radio-group v-model="data.gState">
        <el-radio value="0">启用</el-radio>
        <el-radio value="1">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        添加
      </el-button>
    </el-form-item>
  </el-form>
  </el-dialog>

  <!-- 修改 -->
 <el-dialog v-model="updshow" title="商品管理-修改" width="800" 
    @close="handleClose">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="data"
    :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize"
    status-icon >
    <el-form-item label="商品名称" prop="gName">
      <el-input v-model="data.gName" />
    </el-form-item>
    <el-form-item label="是否启用">
      <el-radio-group v-model="data.gState">
        <el-radio :value=0>启用</el-radio>
        <el-radio :value=1>禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="updss(ruleFormRef)">
        修改
      </el-button>
    </el-form-item>
  </el-form>
  </el-dialog>


</template>
<script lang="ts" setup>
import{ref,onMounted,reactive,inject } from 'vue'
import { type AxiosStatic } from 'axios';
const axios=inject('axios') as AxiosStatic
import { ElMessage,ElMessageBox } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

onMounted(()=>{
    shows()
})

const tableData=ref([])
//显示
const shows=()=>{
    axios.get('/Goods/GetGoods')
    .then((res)=>{
        console.log(res.data)
        tableData.value=res.data
    })
}

//弹框默认不显示
const addshow=ref(false)
//点击添加显示弹框
const adds=()=>{
    addshow.value=true
}
const data=reactive({
    gName:"",
    gState:""
})
//关闭弹框清空数据
const handleClose = () => {
    data.gName=""
    data.gState=""
};
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//非空
const rules = reactive<FormRules>({
    gName: [
    { required: true, message: '请选择商品名称', trigger: 'blur' },
  ],
  gState: [
          { required: true, message: '请选择商品名称', trigger: 'change' }, // 触发验证时机为change
        ],
})
//新增
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        //console.log(data.tmName)
        axios.post('Goods/AddGoods',{
            gName: data.gName,
            gState: data.gState,
            addName: "admin"
        })
        .then(res=>{
            console.log(res.data)
            if(res.data>0){
                ElMessage({
                    message: '添加成功',
                    type: 'success',
                })
                addshow.value=false
                shows()
            }else{
                ElMessage({
                    message: '添加失败',
                    type: 'error',
                })
            }
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const ids=ref('')
//获取选中的值
const handleSelectionChange = (val: User[]) => {
    console.log(val)
    var id='';
    for(var i=0;i<val.length;i++){
        id+=val[i].gid+',';
        //ids.value=id
    }
    ids.value=id.substring(0,id.length-1)
    console.log(ids.value)
}
//批量删除
const dels=()=>{
  ElMessageBox.confirm(
    '您确定要删除吗?',
    '等待',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      //console.log(ids.value)
      if(ids.value==""){
        ElMessage({
          type: 'error',
          message: '请选择要删除的数据',
        })
        return
      }
      axios.delete('Goods/DelGoods/',{
        params:{
          ids:ids.value,
          names:"admin"
        }
      })
      .then((res)=>{
        console.log(res)
        if(res.data>0){
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          shows()
        }else{
          ElMessage({
            type: 'error',
            message: '删除失败',
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const updshow=ref(false)

const datas=reactive({
  gid:"",
  addName:"",
  addDate:"",
  updName:"",
  isDel:""
})
//修改赋值
const upd=(dat:any)=>{
  console.log(dat,dat.gState)
  updshow.value=true
  data.gName=dat.gName
  data.gState=dat.gState

  datas.gid=dat.gid
  datas.addName=dat.addName
  datas.addDate=dat.addDate
  datas.isDel=dat.isDel

}

//修改
const updss = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        //console.log(data.tmName)
        axios.post('Goods/UpdGoods',{
            addName: datas.addName,
            addDate:datas.addDate,
            gid:datas.gid,
            updName:"admin",
            isDel:datas.isDel,
            gName:data.gName,
            gState:data.gState
        })
        .then(res=>{
            console.log(res.data)
            if(res.data>0){
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
                updshow.value=false
                shows()
            }else{
                ElMessage({
                    message: '修改失败',
                    type: 'error',
                })
            }
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}





</script>